@media screen and (min-width: 1920px) {
    .index{
        .section1{
            padding-top: 67.5rem;
        }
    }
}
@media screen and (max-width: 1804px) {
    header .header-container, .index .section3{
        padding-left: 2.625rem;
        padding-right: 2.625rem;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    .section1-top{
        padding-top: 15.729%;
        padding-bottom: 9.739%;
    }
}
@media screen and (max-width: 1644px) {
    .index-container{
        padding-left: 2.625rem;
        padding-right: 2.625rem;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    html{
        font-size: 15px;
    }
}
@media screen and (max-width: 1480px) {
    .container-1400{
        padding-left: 2.625rem;
        padding-right: 2.625rem;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
}
@media screen and (max-width: 1200px) {
    html{
        font-size: 14px;
    }
    header nav .nav-item{
        margin: 0 1.25rem;
    }
    footer .footer-nav .footer-nav-item + .footer-nav-item{
        margin-left: 3.625rem;
    }
}
@media screen and (max-width: 992px) {
    html{
        font-size: 12px;
    }
    header nav .nav-item{
        margin: 0 .625rem;
    }
    footer .footer-nav .footer-nav-item + .footer-nav-item{
        margin-left: 2.375rem;
    }
}
@media screen and (max-width: 768px) {
    html {
        font-size: 18px;
    }
    .hide768{
        display: none!important;
    }
    .show768{
        display: block!important;
    }
    .show768.flex{
        display: flex!important;
    }
    header{
        position: sticky;
        &.active{
            background-color: #fff;
            --header-color: #232323;
            border-bottom: none;
            box-shadow: 0px 0.375rem 1.25rem #0000001c;
        }
    }
    footer{
        .footer-info,.footer-logo,.footer-left{
            flex-direction: column;
        }
        .footer-container{
            padding: 1.25rem 0;
        }
        .footer-left{
            width: 100%;
            align-items: center;
            text-align: center;
            font-size: 1.125rem;
            line-height: 1.75rem;
        }
        .footer-code{
            margin-right: 0;
            margin-bottom: 1.25rem;
        }
        .footer-info{
            height: auto;
            padding: 1.25rem 0;
        }
        .footer-logo-text{
            margin-left: auto;
            margin-right: auto;
            margin-top: 1.25rem;
        }
    }
    .index{
        .section2{
            padding-top: 2.6875rem;
            .item .link{
                margin-right: 0;
            }
            .title-top{
                margin-bottom: 4.4375rem;
            }
        }
        .light-conhtainer{
            .overflow-h .title-top{
                font-size: 2.5rem;
                margin-top: 2.5rem;
                margin-bottom: 2.625rem;
            }
            .section3-container .title-top{
                padding-top: 2.5rem;
                margin-bottom: 2.625rem;
                font-size: 3rem;
            }
        }
        .section3{
            .title-top{
                font-size: 2.8125rem;
                &.active{
                    font-size: 1.5625rem;
                }
            }
            .swiper-wrapper,.swiper-slide{
                flex-direction: column;
            }
            .swiper-slide + .swiper-slide{
                margin-top: 1.25rem;
            }
            .slide-info{
                flex-direction: row;
                align-items: center;
                flex-grow: 0;
                width: 100%;
            }
            .slide-img{
                width: 100%;
                margin-right: 0;
                height: 23.4375rem;
            }
            .slide-title{
                flex-grow: 1;
                width: 0;
            }
            .slide-link{
                margin-bottom: 0;
            }
        }
        .section4{
            flex-direction: column;
            .item{
                flex-grow: 0;
                width: 100%;
                height: 28.9375rem;
                border-radius: 1.25rem;
                .info{
                    opacity: 1;
                    left: 1.25rem;
                    bottom: 1.25rem;
                }
            }
            .item + .item{
                margin-left: 0;
                margin-top: 1.25rem;
            }
        }
        .section5{
            .title-top{
                flex-direction: column;
                .left{
                    margin-bottom: 2.5rem;
                }
                .right{
                    width: 100%;
                }
            }
        }
        .section6{
            overflow: hidden;
            .swiper{
                overflow: initial;
            }
        }
    }
    .section1-top{
        padding-top: 7.729%;
        &.section1-top-right{
            .section1-container{
                padding-bottom: 6.875rem;
            }
            .section1-right-content{
                width: 100%;
            }
            .section1-right-title{
                margin-top: 5rem;
                margin-bottom: 2rem;
                font-size: 6.25rem;
            }
        }
        .section1-top-yellow{
            top: 1.75rem;
        }
        .section1-top-hand{
            top: 7.9rem;
            max-width: 35.7%;
        }
        .section1-etitle{
            font-size: 4.25rem;
        }
        .section1-title{
            font-size: 5.75rem;
        }
    }
    .design .section2{
        .item{
            padding: 2rem;
            height: auto;
            flex-direction: column;
            &:nth-of-type(2n) .info{
                order: 0;
                align-items: flex-start;
            }
            .info{
                width: 100%;
                max-width: 100%;
            }
            .link{
                margin-bottom: 2.5rem;
            }
        }
        ul{
            li{
                margin-right: 2rem;
            }
        }
        .img{
            margin-top: 2.5rem;
        }
    }
    .design-children{
        .section1{
            .top{
                padding-top: 5.125rem;
                .title{
                    font-size: 5.2rem;
                }
                ul li{
                    line-height: normal;
                    margin-right: 1.875rem;
                }
            }
            .bottom{
                flex-direction: column;
                min-height: auto;
                .right{
                    margin-top: 2.5rem;
                    width: 100%;
                }
            }
        }
        .section2{
            padding-bottom: 6rem;
            .left{
                margin-bottom: 5rem;
            }
            .right{
                width: 100%;
            }
            .top{
                flex-direction: column;
                margin-bottom: 6.4375rem;
            }
            .logo-list .logo-list-item{
                width: 33.33%;
                padding-top: 33.33%;
            }
        }
        .section3{
            overflow: hidden;
            flex-direction: column;
            .left{
                position: relative;
                flex-direction: row;
                flex-wrap: wrap;
                top: 0;
                margin-bottom: 2.5rem;
                li{
                    margin-right: 1.5625rem;
                    &:last-child{
                        margin-right: 0;
                    }
                    &::before{
                        top: auto;
                        bottom: 0;
                    }
                    &.active::before{
                        width: 100%;
                    }
                }
            }
            .right{
                width: 100%;
                .info{
                    font-size: 1.125rem;
                }
                .swiper-wrapper{
                    flex-direction: row;
                    .item{
                        margin-top: 0;
                        .img{
                            width: 85%;
                        }
                    }
                }
            }
        }
    }
    .brand .section1 .top .bg{
        // top: 3rem;
        right: 0;
        top: auto;
        height: 15rem;
        width: auto;
        bottom: 1rem;
    }
    .interface .section1 .top .bg{
        // top: 5rem;
        top: auto;
        height: 14rem;
        width: auto;
        bottom: 1rem;
    }
    .marketing .section1 .top .bg{
        // top: 2.6875rem;
        top: auto;
        height: 15rem;
        width: auto;
        bottom: 1rem;
        right: 0;
    }
    .function .section2{
        .item{
            flex-direction: column;
            &:nth-of-type(2n) .left{
                order: 0;
            }
        }
        .left{
            margin-bottom: 1.25rem;
        }
        .left,.right{
            width: 100%;
        }
        .right-bottom{
            padding-top: 64.1025%;
            .swiper-wrapper{
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
    .certificate{
        .section2{
            .top-left{
                margin-bottom: 1.25rem;
            }
            .top{
                flex-direction: column;
            }
            .index-container{
                padding-bottom: 6.25rem;
            }
        }
        .section3{
            padding-bottom: 6.875rem;
            .title{
                flex-direction: column;
                align-items: flex-start;
                .link{
                    margin-top: 2.5rem;
                }
            }
            .bottom{
                flex-direction: column;
            }
            .left,.list{
                width: 100%;
            }
            .left{
                margin-bottom: 2.5rem;
            }
        }
    }
    .about{
        .section2{
            .item{
                width: 50%;
                min-width: auto;
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            .link{
                margin-left: auto;
                margin-right: auto;
            }
        }
        .section3{
            text-align: center;
            .left{
                text-align: center;
            }
            .container-1400{
                flex-direction: column;
            }
            .img{
                margin: 2.5rem 0;
                width: 750 / 1400 * 100% * 1.5;
                padding-top: 560 / 1400 * 100% * 1.5;
            }
        }
        .section4 .swiper-slide{
            padding-right: 0;
        }
    }
    .secure{
        .section2{
            flex-direction: column;
            padding-bottom: 6.375rem;
            .right{
                margin-top: 2.5rem;
                width: 100%;
            }
        }
        .section3{
            padding-top: 8.125rem;
        }
    }
    .function_detail{
        .section1{
            margin-top: 2.125rem;
            margin-bottom: 0;
            .title{
                font-size: 4rem;
            }
        }
        .section2 .item{
            width: 100%;
        }
    }
    .dynamics{
        .section1{
            padding-top: 5.125rem;
        }
        .section2{
            .top{
                flex-direction: column;
                height: auto;
            }
            .top-img{
                width: 100%;
                padding-top: 440 / 925 * 100%;
            }
            .top-info{
                width: 100%;
            }
            .top-title{
                margin-bottom: 2.5rem;
            }
            .item{
                width: 100%;
            }
        }
    }
    .modal .honor{
        .swiper-slide{
            max-width: 100%;
        }
        .img-container{
            display: inline-block;
        }
        .slide-img{
            max-width: 100%;
            height: auto;
            max-height: 29.375rem;
        }
    }
}
@media screen and (max-width: 750px) {
    html {
      font-size: 16px;
    }
}
@media screen and (max-width: 667px) {
    html {
        font-size: calc(667px / calc(750 / 16));
    }
}
@media screen and (max-width: 576px) {
    html {
        font-size: calc(576px / calc(750 / 16));
    }
}
@media screen and (max-width: 480px) {
    html {
        font-size: calc(480px / calc(750 / 16));
    }
}
@media screen and (max-width: 375px) {
    html {
        font-size: calc(375px / calc(750 / 16));
    }
}